<script setup lang='ts'>
import { ref,onMounted,onBeforeUnmount } from 'vue'
import * as signalR from '@microsoft/signalr'
import setUpTime from '@/utils/setUpTime'
import { ALL } from '@/api/baseUrl'

import MeasurePointTable from '@/components/global/MeasurePointTable.vue'
import MaintenanceDialog from '@/components/global/MaintenanceDialog.vue'
import RepairDialog from '@/components/global/RepairDialog.vue'

import { 
  FetchLatestValueByDeviceType, 
  GetHandHeldRecordList
} from '@/api/publicApi'

// 定义变量
const tableData1 = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
// refs
const maintenanceDialogRef = ref()
const repairDialogRef = ref()
const maintenanceTableRef = ref()

const deviceType = ref('皮带电机')
// 表格数据
const tableData:any = ref([])

// signalR链接
const connection:any = ref()

// 定义函数
onMounted(() => {
  getBeltMotorData()
  signalRConnect()
})

// signalR长连接
const signalRConnect = () => {
  // 获取设备测点实时数据
  connection.value = new signalR.HubConnectionBuilder().withUrl(`${ALL}/signalr`, {
    skipNegotiation: true,
    transport: signalR.HttpTransportType.WebSockets
  }).build()
  connection.value.start()
  console.log('开始链接signalR----->')
  connection.value.on('updateTemperShock', message => {

    // 接收signalr数据
    let {
      BarWheelMachineCode,
      MeasurePointCode,
      IsError,
      LastModificationTime,
      ShockValue,
      TemperValue
    } = JSON.parse(message)
    console.log('接收signalR消息----->', JSON.parse(message), localStorage.BarWheelMachineCode)
    if (BarWheelMachineCode === localStorage.BarWheelMachineCode) {
      tableData.value.forEach(item => {
        if (item.measurePointCode === MeasurePointCode) {
          item.shockValue = ShockValue,
          item.temperValue = TemperValue,
          item.isError = IsError,
          item.lastModificationTime = setUpTime.formatTime(LastModificationTime)
        }
      })
    }

    // 按时间排序
    tableData.value.sort(function (a, b) {
      return b.lastModificationTime < a.lastModificationTime
    })
  })
  connection.value.onclose(() => {
    setTimeout(() => {
      connection.value.start()
    }, 5000)
  })
}

// 获取表格数据
const getBeltMotorData = async () => {
  let DeviceTypeList = JSON.parse(localStorage.DeviceTypeList)
  let DeviceTypeObj = DeviceTypeList.find(
    item => item.name === '皮带电机'
  )
  console.log('DeviceTypeCode---->', DeviceTypeObj,DeviceTypeList)
  let params = {
    BarWheelMachineCode: localStorage.BarWheelMachineCode,
    BwmCode: localStorage.BarWheelMachineCode,
    DeviceTypeCode: DeviceTypeObj.code
  }
  // 加载时获取实时列表数据
  FetchLatestValueByDeviceType(params).then(res => {
    if (res.success === true) {
      tableData.value = []
      tableData.value = [ ...res.result ]
      tableData.value.forEach(item => {
        item.lastModificationTime = setUpTime.formatTime(
          item.lastModificationTime
        )
      })
    }
  })
  console.log('实时数据---->',tableData.value)
  
  // GetHandHeldRecordList(params).then(res => {
  //   this.holdDeviceList = res.result.items
  //   this.holdDeviceList[0].lastModificationTime = setUpTime.formatTime(this.holdDeviceList[0].lastModificationTime)
  // })
}

// 展示弹框
const showDialog = (num:number) => {
  if(num) {
    repairDialogRef.value.dialogVisible = true
  } else {
    maintenanceDialogRef.value.dialogVisible = true
  }
}

onBeforeUnmount(() => {
  connection.value.off('updateTemperShock')
})
</script>

<template>
  <div class="belt-motor-main-box">
    <div class="model-info">
      <div class="model-img" />
      <div class="btn-box">
        <div
          class="custom-button"
          @click="showDialog(0)"
        >
          保养记录
        </div>
        <div
          class="custom-button"
          @click="showDialog(1)"
        >
          维修记录
        </div>
      </div>
    </div>
    <div class="table-box">
      <MeasurePointTable
        ref="maintenanceTableRef"
        :device-type="deviceType"
      />
    </div>
    <div>
      <MaintenanceDialog
        ref="maintenanceDialogRef"
        :device-type="110"
        :Measuring="tableData1"
      />
      <RepairDialog
        ref="repairDialogRef"
        :device-type="110"
        :Measuring="tableData1"
      />
    </div>
  </div>
</template>

<style scoped lang=scss>
.belt-motor-main-box {
  width: 100%;
  height: 100%;
  background-color: #fff;

  /* border: 1px solid red; */

  .model-info {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 60%;

    /* border: 1px solid green; */

    .model-img {
      width: 70%;
      height: 100%;
      background-image: url("../../../assets/imgs/beltMotor.png");
      background-size: 100% 100%;

      /* border: 1px solid yellow; */
    }

    .btn-box {
      width: 10%;
      height: 10%;
      padding-top: 20px;

      >div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 98px;
        height: 40px;
        margin-top: 10px;
        font-size: 16px;
      }
    }
  }

  .table-box {
    height: 38%;
    padding: 0 24px;
  }
}
</style>